<template>
  <div
    style="
      display: flex;
      justify-content: center;
      height: 100%;
      background-color: #fff;
    "
  >
    <el-descriptions :column="1" title="公司详情" style="width: 80%">
      <el-descriptions-item label="公司名称：">{{
        state.companyDetails.name
      }}</el-descriptions-item>
      <el-descriptions-item label="邮箱：">
        {{ state.companyDetails.email }}</el-descriptions-item
      >
      <el-descriptions-item label="电话号码：">{{
        state.companyDetails.telephone
      }}</el-descriptions-item>
      <el-descriptions-item label="地址：">{{
        state.companyDetails.addressName == null
          ? "桂林电子科技大学"
          : state.companyDetails.addressName
      }}</el-descriptions-item>
      <el-descriptions-item label="创建时间：">{{
        state.companyDetails.createTime
      }}</el-descriptions-item>
      <el-descriptions-item label="员工数量：">{{
        state.companyDetails.employeeSize
      }}</el-descriptions-item>
      <el-descriptions-item label="法定代表人：">{{
        state.companyDetails.legalRepresentative
      }}</el-descriptions-item>
      <el-descriptions-item label="机构名称：">{{
        state.companyDetails.industryName
      }}</el-descriptions-item>
      <el-descriptions-item>
        <el-button
          type="primary"
          style="align-self: center; margin-top: 20px"
          @click="handelEditDialogVisible"
          >修改公司信息</el-button
        >
      </el-descriptions-item>
    </el-descriptions>
    <el-dialog
      v-model="state.EditDialogVisible"
      title="个人信息"
      width="700"
      style="padding-left: 50px"
    >
      <el-form
        :model="state.companyDetails"
        label-position="left"
        label-width="auto"
        style="max-width: 400px"
      >
        <el-form-item label="输入公司名称">
          <el-input v-model="state.companyDetails.name" />
        </el-form-item>
        <el-form-item label="选择机构">
          <el-select
            v-model="state.companyDetails.industryId"
            placeholder="选择机构"
          >
            <el-option
              v-for="item in state.industry"
              :key="item.industryId"
              :label="item.name"
              :value="item.industryId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="输入公司人数">
          <el-input-number
            v-model="state.companyDetails.employeeSize"
            controls-position="right"
          />
        </el-form-item>
        <el-form-item label="输入公司地址">
          <el-input v-model="state.companyDetails.addressName" />
        </el-form-item>
        <el-form-item label="输入公司邮箱">
          <el-input v-model="state.companyDetails.email" />
        </el-form-item>
        <el-form-item label="输入公司法人">
          <el-input v-model="state.companyDetails.legalRepresentative" />
        </el-form-item>
        <el-form-item label="输入公司电话号码">
          <el-input v-model="state.companyDetails.telephone" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="state.EditDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="commitForm"> 提交 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive } from "vue";
import { myCompany, updateCompany, getIndustry } from "@/api/company";
import { ElMessage } from "element-plus";
defineOptions({
  name: "modifyCompany"
});
let state = reactive({
  tree: [],
  EditDialogVisible: false,
  companyDetails: {
    addressName: "",
    name: "",
    email: "",
    telephone: "",
    legalRepresentative: "",
    employeeSize: 0,
    industryId: ""
  },
  industry: []
});
const handelEditDialogVisible = () => {
  state.EditDialogVisible = true;
};
const commitForm = async () => {
  console.log(state.companyDetails);
  const result = await updateCompany(state.companyDetails);
  if (result.code == 200) {
    ElMessage({
      type: "success",
      message: "更新信息成功"
    });
    initData();
    state.EditDialogVisible = false;
  } else {
    ElMessage({
      type: "warning",
      message: "更新信息失败！"
    });
  }
};
const initData = async () => {
  const result = await myCompany();
  const res = await getIndustry();
  if (res.code == 200) {
    state.industry = res.data;
  }
  if (result.code == 200) {
    state.companyDetails = result.data;
  }
};
onMounted(() => {
  initData();
});
</script>
